<template>
  <div class="after-sales" v-if="data">
    <div>
      <div>
        <span
          ><b
            >申请时间:{{
              moment(data[0].order_time).format("YYYY-MM-DD HH:mm:ss")
            }}</b
          ></span
        >
        <img
          :src="
            require(`../../../../item-server/router/components/commodity/${data[0].pic}`)
          "
          alt=""
        />
      </div>
      <div>
        <span>状态:{{ data[0].order_status }}</span>
      </div>
      <div>
        <h4>
          超时倒计时：<br /><span style="color: red">{{ this.date }}</span>
        </h4>
        <el-button
          type="danger"
          size="small"
          @click="
            dialogFormVisible = true;
            resolve();
          "
          >处理订单</el-button
        >
      </div>
      <!-- 弹出层 -->
      <el-dialog
        title="售后处理"
        :visible.sync="dialogFormVisible"
        v-if="cumdata"
      >
        <section class="popdialog">
          <div>
            <h4>
              订单编号:<span style="font-size: 20px">{{ data[0].oid }}</span>
            </h4>
            <h3>
              申请用户:<span style="font-size: 20px">{{
                cumdata[0].u_true_name
              }}</span>
            </h3>
          </div>
          <div>
            <h2>
              申请服务：<span style="color: red">{{ data[0].aftersales }}</span>
            </h2>
          </div>
          <div>
            <h3>
              申请原因：<span style="color: red">{{ data[0].aftercause }}</span>
            </h3>
            <h3>
              退款金额：<span style="color: red"
                >{{ data[0].price_total }}
              </span>
            </h3>
          </div>
          <div>
            <el-descriptions
              title="详情"
              direction="vertical"
              :column="1"
              border
            >
              <el-descriptions-item label="用户账号">{{
                data[0].user
              }}</el-descriptions-item>
              <el-descriptions-item label="手机号">{{
                cumdata[0].uphone
              }}</el-descriptions-item>
              <el-descriptions-item label="邮箱" :span="2">{{
                cumdata[0].uemail
              }}</el-descriptions-item>
              <el-descriptions-item label="备注">
                <el-tag size="medium">商品名称：{{ data[0].title }} </el-tag>
                <el-tag size="medium">商品尺码:{{ data[0].size }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="联系地址">{{
                cumdata[0].uaddr
              }}</el-descriptions-item>
            </el-descriptions>
          </div>
          <div>
            <el-button type="primary">通过</el-button>
            <el-button type="danger">拒绝</el-button>
          </div>
        </section>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// import moment from "moment";
export default {
  data() {
    return {
      date: "",
      data: null,
      cumdata: null,
      pop: "",
      dialogFormVisible: false,
    };
  },
  mounted() {
    this.getAfter();
  },
  methods: {
    resolve() {
      let url = `stroll/customer?user=${this.data[0].user}`;
      this.axios.get(url).then((res) => {
        this.cumdata = res.data;
        console.log(this.cumdata);
      });
    },
    getAfter() {
      let url = `stroll/after?shopId=${sessionStorage.getItem("shopId")}`;
      this.axios.get(url).then((res) => {
        if (res) {
          this.data = res.data;
          console.log(this.data);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.after-sales {
  display: flex;
  flex-wrap: wrap;
  > div {
    width: 200px;
    padding: 10px;
    margin: 10px;
    border: 1px solid rgb(212, 212, 212);
    > div:first-child {
      img {
        width: 100%;
      }
    }
    > div:first-child ~ div {
      display: flex;
      justify-content: space-between;
    }
  }

  .popdialog {
    background-color: aliceblue;
    padding: 10px;
    > div:first-child {
      display: flex;
      justify-content: space-between;
    }
    > div:nth-child(2) {
      text-align: center;
    }
    > div:nth-child(3) {
      margin: 10px auto;
    }
    > div:nth-child(4) {
      margin-top: 10px;
      .el-descriptions__body {
        background-color: aliceblue !important;
      }
    }
    > div:last-child {
      text-align: center;
    }
  }
}
</style>